<template>
	<view class="wrap">
		<u-toast ref="uToast"></u-toast>
		<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
		<u-button
			color="#E54E4E"
			customStyle="width: 212rpx;height: 64rpx;"
			@tap="getCode"
		>
			{{ tips }}
		</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tips: '',
			// refCode: null,
			seconds: 60
		};
	},
	onReady() {
		// 注意这里不能将一个组件赋值给data的一个变量，否则在微信小程序会
		// 造成循环引用而报错，如果你想这样做，请在非data中定义refCode变量
		// this.refCode = this.$refs.uCode;
	},
	methods: {
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				});
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 2000);
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		end() {
			// uni.$u.toast('倒计时结束');
		},
		start() {
			// uni.$u.toast('倒计时开始');
		}
	}
};
</script>

<style lang="scss">
.wrap {
}
</style>
